<script lang="ts" setup>
import TypeIt from "typeit";
import type { Character } from "typeit/dist/types";

const handleText1 = () => {
  const instance = new TypeIt(".text1", {
    strings: ["how are you!", "I'm fine,thanks, and you?"],
  });
  instance.flush();
};

const handleText2 = () => {
  const instance = new TypeIt(".text2", { speed: 50 });
  instance.type("how are you!").pause(500).type("I'm fine, thanks, and you?").go();
};

const handleText3 = () => {
  const instance = new TypeIt(".text3", { speed: 50 });
  instance
    .type("how are you!")
    .delete(4)
    .pause(500)
    .delete()
    .type("Jack and <strong class='name'>Jill</strong> went up the hill")
    .pause(500)
    // .delete(".name") // 删除：<strong class='name'>Jill</strong> went up the hill
    .delete(".name", { to: "END" }) // 删除：went up the hill
    .go();
};

const handleText4 = () => {
  const instance = new TypeIt(".text4", { speed: 50 });
  instance.type("how are you!").break().type("I'm fine, thanks, and you?").go();
};

const handleText5 = () => {
  const instance = new TypeIt(".text5", { speed: 100, lifeLike: true });
  instance.type("how are you!").break().type("I'm fine, thanks, and you?").go();
};

const syncValue = ref("");
const syncThing = () => {
  return new Promise(resolve => {
    const m = Math.random() * 100;
    setTimeout(() => {
      syncValue.value = m > 50 ? "very good" : "bad";
      resolve(true);
    }, 2000);
  });
};

const handleText6 = () => {
  const instance = new TypeIt(".text6", { speed: 50, lifeLike: true });
  instance
    .type("how are you!")
    .break()
    .exec(async () => {
      await syncThing();
      instance.type(syncValue.value); // 8.8.7版本不会打印这句
    })
    .type("I'm fine, thanks, and you?")
    .go();
};

const handleText7 = () => {
  const instance = new TypeIt(".text7", { speed: 100, lifeLike: true });
  instance.type("how are you!", { delay: 2000 }).break().type("I'm fine, thanks, and you?").go();
};

const handleText8 = () => {
  const instance = new TypeIt(".text8", { speed: 100, lifeLike: true });
  instance
    .type("how are you!", { instant: true, delay: 2000 })
    .break()
    .type("I'm fine, thanks, and you?", { instant: true })
    .go();
};

const handleText9 = () => {
  const instance = new TypeIt(".text9", { speed: 100, lifeLike: true });
  instance.type("how are you!", { delay: 2000 }).break().type("I'm fine, thanks, and you?").go();
  console.log(instance.is("completed"));
  instance.destroy(false);
  console.log(instance.is("destroyed"));
};

const handleText10 = () => {
  const instance = new TypeIt(".text10", { speed: 100, lifeLike: true });
  instance.type("how are you!", { delay: 2000 }).break().type("I'm fine, thanks, and you?").go();
  instance.reset(undefined);
};

const handleText11 = () => {
  const instance = new TypeIt(".text11", { speed: 100, lifeLike: true });
  instance.type("shit, brother").break().type("What's up, man?").go();
  setTimeout(() => {
    instance.freeze();
    setTimeout(() => {
      instance.unfreeze();
    }, 3000);
  }, 1500);
};

const handleText12 = () => {
  const instance = new TypeIt(".text12", { speed: 100, lifeLike: true });
  instance
    .type("how are you!", { delay: 2000 })
    .break()
    .type("I'm fine, thanks, and you?")
    .flush(() => console.log("done"));
};

const handleText13 = () => {
  const instance = new TypeIt(".text13", {
    speed: 100,
    lifeLike: true,
    afterComplete: () => console.log("Initial animation is done!"),
  })
    .type("shit, brother!")
    .break()
    .go();
  instance.type("What's up, man!").flush();
  instance.reset(undefined).go();
};

const handleText14 = () => {
  const instance = new TypeIt(".text14", {
    speed: 100,
    lifeLike: true,
    beforeStep: (/* ins: TypeIt */) => {
      // console.log("字符输出前执行");
      // console.log("instance", ins);
      // instance.freeze();
    },
    beforeString: (characters: Character[]) => {
      console.log(characters);
    },
    afterStep: (/* ins: TypeIt */) => {
      // console.log("字符输出后执行");
      // console.log("instance", ins);
      // instance.freeze();
    },
    afterString: (characters: Character[]) => {
      console.log(characters);
    },
    afterComplete: () => {
      console.log("done!");
    },
  });
  instance.type("how are you!", { delay: 2000 }).break().type("I'm fine, thanks, and you?").go();
};
</script>
<template>
  <div>
    <div>
      初始化:
      <p class="text1"></p>
      <a-button @click="handleText1">start</a-button>
    </div>
    <div>
      type():
      <p class="text2"></p>
      <a-button @click="handleText2">start</a-button>
    </div>
    <div>
      delete():
      <p class="text3"></p>
      <a-button @click="handleText3">start</a-button>
    </div>
    <div>
      break():
      <p class="text4"></p>
      <a-button @click="handleText4">start</a-button>
    </div>
    <div>
      options():
      <p class="text5"></p>
      <a-button @click="handleText5">start</a-button>
    </div>
    <div>
      exec():
      <p class="text6"></p>
      <a-button @click="handleText6">start</a-button>
    </div>
    <div>
      设置延迟，而不是调用pause():
      <p class="text7"></p>
      <a-button @click="handleText7">start</a-button>
    </div>
    <div>
      立即执行，文本一次输出完，而不是单字符输出:
      <p class="text8"></p>
      <a-button @click="handleText8">start</a-button>
    </div>
    <div>
      destroy():
      <p class="text9"></p>
      <a-button @click="handleText9">start</a-button>
    </div>
    <div>
      reset():
      <p class="text10"></p>
      <a-button @click="handleText10">start</a-button>
    </div>
    <div>
      freeze()和unfreeze():
      <p class="text11"></p>
      <a-button @click="handleText11">start</a-button>
    </div>
    <div>
      flush():
      <p class="text12"></p>
      <a-button @click="handleText12">start</a-button>
    </div>
    <div>
      go() + flush():
      <p class="text13"></p>
      <a-button @click="handleText13">start</a-button>
    </div>
    <div>
      callback methods:
      <p class="text14"></p>
      <a-button @click="handleText14">start</a-button>
    </div>
  </div>
</template>
<style lang="less" scoped></style>
